<script setup lang="ts">
import type { GuessItemVO } from "@/types/homeType";

interface CateProps {
   cate: GuessItemVO;
}

defineProps<CateProps>()
</script>

<template>
   <navigator class="goods" hover-class="none" :url="`/subPackages/detail/detail?id=${cate.id}`">
      <image class="image" :src="cate.picture"></image>
      <view class="name ellipsis">{{cate.name}}</view>
      <view class="price">
         <text class="symbol">¥</text>
         <text class="number">{{ cate.price}}</text>
      </view>
   </navigator>

</template>

<style scoped lang="scss">
.goods {
   width: 150rpx;
   margin: 0 30rpx 20rpx 0;

   &:nth-child(3n) {
      margin-right: 0;
   }

   image {
      width: 150rpx;
      height: 150rpx;
   }

   .name {
      padding: 5rpx;
      font-size: 22rpx;
      color: #333;
   }

   .price {
      padding: 5rpx;
      font-size: 18rpx;
      color: #cf4444;
   }

   .number {
      font-size: 24rpx;
      margin-left: 2rpx;
   }
}
</style>